import Bar from '@/components/Bar'
import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { action1, actionUser } from '@/redux/action'

const HomePage = () => {
  // 派发action对象到reducer修改仓库数据
  const dispatch = useDispatch()
  // 获取仓库数据，传递函数，调用函数，将仓库数据返回给调用者
  const { count, user } = useSelector((state) => {
    return state
  })
  const onDisCount = () => {
    dispatch(action1)
  }
  const onDisUser = () => {
    dispatch(actionUser())
  }

  return (
    <div>
      <Bar title='手机品牌销量'
        xData={['苹果', 'oppo', '华为', '小米']}
        yData={[17000000, 12000000, 23000000, 13000000]}
        style={{ width: '1000px', height: '400px' }}
      />
      <Bar title='班级成绩统计'
        xData={['语文', '数学', '英语', '历史', '地理', '化学', '生物', '政治']}
        yData={[98, 79, 97, 96, 99, 75, 98, 88]}
        style={{ width: '500px', height: '400px' }}
        name='平均分' />
      <div>
        reducer测试:{count.count}
        <Button type="primary" block onClick={onDisCount}>reducer测试</Button>
        <p>
          id: {user.user.id}
        </p>
        <Button type="primary" block onClick={onDisUser}>异步测试修改id</Button>
      </div>
    </div>
  )
}
export default HomePage